<template>
  <div class="container">
    <div class="hd_box">
    </div>
    <div style="text-align:left;padding-left:10px;margin-top:1rem;margin-bottom:1rem;">
      <h3>小乔同学记事本</h3>
    </div>
    <div>
      <van-grid :column-num="3" square>
        <van-grid-item @click="toNote">
          <span class="icon_box">
            <i class="iconfont icon-jizhangben" style="font-size: 34px;color:#fff;"></i>
          </span>
          <span style="color:#333;font-size:14px;margin-top:0.5rem;">记账本</span>
        </van-grid-item>
        <van-grid-item @click="toBirthday">
          <span class="icon_box" style="background-color:#f85a40;">
            <i class="iconfont icon-shengri" style="font-size: 33px;color:#fff;"></i>
          </span>
          <span style="color:#333;font-size:14px;margin-top:0.5rem;">生日提醒</span>
        </van-grid-item>
        <van-grid-item @click="toLastDay">
          <span class="icon_box" style="background-color:#8e43e7;">
          <i class="iconfont icon-tianchongxing-" style="font-size: 28px;color:#fff;"></i>
          </span>
          <span style="color:#333;font-size:14px;margin-top:0.5rem;">倒数日</span>
        </van-grid-item>
        <van-grid-item @click="toPhysiological">
          <span class="icon_box" style="background-color:#146eb4;">
          <i class="iconfont icon-blood-full" style="font-size: 28px;color:#fff;"></i>
          </span>
          <span style="color:#333;font-size:14px;margin-top:0.5rem;">大姨妈提醒</span>
        </van-grid-item>
        <van-grid-item @click="toDiary">
          <span class="icon_box" style="background-color:#2c9f45;">
          <i class="iconfont icon-xinfeng" style="font-size: 23px;color:#fff;"></i>
          </span>
          <span style="color:#333;margin-top:4px;font-size:14px;margin-top:0.5rem;">日记</span>
        </van-grid-item>
        <van-grid-item @click="toTimeMachine">
          <span class="icon_box" style="background-color:#f47721;">
          <i class="iconfont icon-shijian" style="font-size: 33px;color:#fff;"></i>
          </span>
           <span style="color:#333;font-size:14px;margin-top:0.5rem;">时光机</span>
        </van-grid-item>
        <van-grid-item @click="toMovie">
          <span class="icon_box" style="background-color:#000;">
          <i class="iconfont icon-dianying" style="font-size: 33px;color:#fff;"></i>
          </span>
           <span style="color:#333;font-size:14px;margin-top:0.5rem;">电影记录</span>
        </van-grid-item>
        <van-grid-item @click="toWork">
          <span class="icon_box" style="background-color:#b84592;">
          <i class="iconfont icon-web-icon-" style="font-size: 33px;color:#fff;"></i>
          </span>
           <span style="color:#333;font-size:14px;margin-top:0.5rem;">工作记录</span>
        </van-grid-item>
        <van-grid-item @click="toBook">
          <span class="icon_box" style="background-color:#ffb900;">
          <i class="iconfont icon-shu" style="font-size: 33px;color:#fff;"></i>
          </span>
           <span style="color:#333;font-size:14px;margin-top:0.5rem;">阅读记录</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "vant";
import { Grid, GridItem } from "vant";

Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Button);
export default {
  name: "Index",
  components: {},
  created(){
    sessionStorage.setItem('uid',this.$route.query.uid)
  },
  methods:{
    toNote(){
      this.$router.push("/Notepad")
    },
    toBirthday(){
      this.$router.push("/Birthday")
    },
    toLastDay(){
      this.$router.push("/LastDay")
    },
    toPhysiological(){
      this.$router.push("/Physiological")
    },
    toDiary(){
      this.$router.push("/Diary")
    },
    toTimeMachine(){
      this.$router.push("/Time")
    },
    toMovie(){
      this.$router.push("/Movie")
    },
    toWork(){
      this.$router.push("/Work")
    },
    toBook(){
      this.$router.push("/Book")
    }
  }
};
</script>
<style scoped>
.container{
  min-width: 300px;
  height: 100%;
  padding: 0;
  margin: 0;
}
.hd_box{
  background: url('../assets/hd-back.jpg');
  width: 100%;
  height: 9.25rem;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
}
.icon_box{
    background-color: rgb(0, 86, 112);
    border-radius: 85px;
    width: 3rem;
    height: 3rem;
    text-align: center;
    line-height: 3rem;
}
</style>